{extend name="layout/layout" /}


{block name="style"}
	<style>
		.opear{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 45px;
			line-height: 45px;
			background: #e60012;
			color:#fff;
			font-size: 14px;
		}

		.logo{
			width: 40px;
			height: 40px;
		}

		.choic{
			padding-top: 3px;
		}
		.choic img{
			width: 30px;
		}

		.name{
			line-height: 40px;
			padding-left: 20px;
		}

		.password-mask{
			position: fixed;
			z-index: 100;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.3);
		}

		.password-mask .password-container{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
		}

		.password-mask .title{
			line-height: 26px;
			border-bottom: 1px solid #eee;
			padding: 10px 0;
		}

		.password-mask .title p{
			margin: 0;
		}

		.input-container{
			padding: 20px 30px;
		}

		.keyboard>div{
			font-size: 24px;
			line-height: 50px;
			border:1px solid #eee;
		}

		.input-container .mui-col-xs-2 span{
			font-size: 24px;
			border-bottom: 1px solid #ddd;
			width: 80%;
			display: block;
		}

		.keyboard>div.del{
			font-size: 12px;
		}
	</style>
{/block}

{block name="main"}
	<div class="pay-order" v-cloak>
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell" v-for="item, index in payments" v-if="item.id != 2 && item.id != 3" @tap="payIndex = index">
		    	<div class="mui-pull-left">
					<img :src="item.logo_image" class="logo" alt="">
		    	</div>
		    	<div class="name mui-pull-left">{{item.name}}</div>
		    	<div class="choic mui-pull-right">
		    		<img src="/assets/img/she.png" alt="" v-if="payIndex != index">
		    		<img src="/assets/img/selected.png" alt="" v-else>
		    	</div>
		    </li>
		</ul>
		<div class="opear mui-text-center" @tap="checkPayType()">
			确认支付
		</div>

		<div class="password-mask" v-if="showMask">
			<div class="password-container">
				<div class="title mui-text-center">
					请输入支付密码
					<p><a href="{:url('user/resetPayPassword')}">忘记密码？</a></p>
				</div>
				<div class="input-container">
					<div class="mui-row mui-text-center">
						<div class="mui-col-xs-2" v-for="a in password.length"><span>*</span></div>
						<div class="mui-col-xs-2" v-for="b in 6-password.length"><span>&nbsp;</span></div>
					</div>	
				</div>	
				<div class="keyboard mui-row mui-text-center">
					<div class="mui-col-xs-4" @tap="inputPassword(1)">1</div>	
					<div class="mui-col-xs-4" @tap="inputPassword(2)">2</div>	
					<div class="mui-col-xs-4" @tap="inputPassword(3)">3</div>	
					<div class="mui-col-xs-4" @tap="inputPassword(4)">4</div>	
					<div class="mui-col-xs-4" @tap="inputPassword(5)">5</div>	
					<div class="mui-col-xs-4" @tap="inputPassword(6)">6</div>	
					<div class="mui-col-xs-4" @tap="inputPassword(7)">7</div>	
					<div class="mui-col-xs-4" @tap="inputPassword(8)">8</div>	
					<div class="mui-col-xs-4" @tap="inputPassword(9)">9</div>	
					<div class="mui-col-xs-4 del" @tap="showMask = false">关闭</div>	
					<div class="mui-col-xs-4" @tap="inputPassword(0)">0</div>	
					<div class="mui-col-xs-4 del" @tap="delPassword()">删除</div>	
				</div>
			</div>
		</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script>
		var detailVue = new Vue({
			el: '.pay-order',
			data: {
				orderId : "{$data.id?:''}",
				payIndex: null,
				type: "{$data.type?:''}",
				payments:[],
				password: [],
				password_str: '',
				showMask:false,
				payId: '',
			},
			mounted: function(){
				this.getType();
			},
			methods:{
				getType: function(){
					layer.open({
						type:2,
						shadeClose: false
					});

					var that = this;
					var url =  'order/getPaymentType';
					request(that, {'url': url, 'data': {
					  	"type": that.type,
					}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.payments = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},

				//检查支付方式
				checkPayType: function(){
					var that = this;
					if(that.payIndex == null){
						mui.toast('请选择支付方式');return;
					}

					var item = this.payments[this.payIndex];
					this.payId = item.id;

					//不是在线支付需要输入支付密码
					if(item.need_password == 1){
						that.showMask = true;
					} else {
						that.pay();
					}
				},

				pay: function(){
					var that = this;
					layer.open({
						type:2,
						shadeClose: false
					});
					var url =  'order/payOrder';
					request(that, {'url': url, 'data': {
					  	"order_id": that.orderId,
					  	"payment_id": that.payId,
					  	"pay_password": that.password_str,
					}}, function(res){
						layer.closeAll();
						mui.toast(res.msg);
						if(res.code == 200) {
							location.href = '/mobile/order/index';
						} else {
							that.password_str = '';
							that.password = [];
						}
					},function(error){
						that.password_str = '';
						that.password = [];
						layer.closeAll();
						mui.toast(error.body.msg);
					});
				},

				inputPassword: function(num) {
					this.password.push(num);
					this.password_str = this.password.join('');
					if(this.password.length == 6){
						this.pay();
					}
				},
				delPassword: function(){
					this.password.splice(this.password.length-1,1);
				}
			}

		});
	</script>
{/block}